<template>
  <div class="settings-container">
    <h2 class="page-title">系统设置</h2>
    
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <span>基本设置</span>
        </div>
      </template>
      
      <el-form :model="settingsForm" :rules="rules" ref="formRef" label-width="120px" class="settings-form">
        <el-form-item label="系统名称" prop="systemName">
          <el-input v-model="settingsForm.systemName" placeholder="请输入系统名称" />
        </el-form-item>
        
        <el-form-item label="主题设置" prop="theme">
          <el-select v-model="settingsForm.theme" placeholder="请选择主题">
            <el-option label="默认主题" value="default" />
            <el-option label="深色主题" value="dark" />
            <el-option label="蓝色主题" value="blue" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="语言" prop="language">
          <el-select v-model="settingsForm.language" placeholder="请选择语言">
            <el-option label="中文" value="zh-CN" />
            <el-option label="英文" value="en-US" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="是否启用动画" prop="enableAnimation">
          <el-switch v-model="settingsForm.enableAnimation" />
        </el-form-item>
        
        <el-form-item label="自动保存" prop="autoSave">
          <el-switch v-model="settingsForm.autoSave" />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleSave">保存设置</el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button @click="handleRestoreDefaults">恢复默认设置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card class="notifications-card">
      <template #header>
        <div class="card-header">
          <span>通知设置</span>
        </div>
      </template>
      
      <div class="notifications-settings">
        <el-form-item label="登录通知">
          <el-switch v-model="settingsForm.enableLoginNotify" />
        </el-form-item>
        
        <el-form-item label="操作日志通知">
          <el-switch v-model="settingsForm.enableOperationLogNotify" />
        </el-form-item>
        
        <el-form-item label="系统更新通知">
          <el-switch v-model="settingsForm.enableUpdateNotify" />
        </el-form-item>
      </div>
    </el-card>
    
    <el-card class="about-system-card">
      <template #header>
        <div class="card-header">
          <span>关于系统</span>
        </div>
      </template>
      
      <div class="about-system">
        <div class="system-info-item">
          <label>系统版本：</label>
          <span>{{ systemInfo.version }}</span>
        </div>
        <div class="system-info-item">
          <label>构建日期：</label>
          <span>{{ systemInfo.buildDate }}</span>
        </div>
        <div class="system-info-item">
          <label>开发团队：</label>
          <span>{{ systemInfo.developer }}</span>
        </div>
        <div class="system-info-item">
          <label>技术栈：</label>
          <span>{{ systemInfo.techStack }}</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

// 表单数据
const settingsForm = reactive({
  systemName: 'SPZX Admin',
  theme: 'default',
  language: 'zh-CN',
  enableAnimation: true,
  autoSave: true,
  enableLoginNotify: true,
  enableOperationLogNotify: true,
  enableUpdateNotify: true
})

// 系统信息
const systemInfo = reactive({
  version: '1.0.0',
  buildDate: '2025-09-28',
  developer: 'SPZX Team',
  techStack: 'Vue 3, TypeScript, Element Plus, Vite'
})

// 表单验证规则
const rules = {
  systemName: [
    { required: true, message: '请输入系统名称', trigger: 'blur' },
    { min: 2, max: 20, message: '系统名称长度在2到20个字符之间', trigger: 'blur' }
  ],
  theme: [
    { required: true, message: '请选择主题', trigger: 'change' }
  ],
  language: [
    { required: true, message: '请选择语言', trigger: 'change' }
  ]
}

// 表单引用
const formRef = ref<InstanceType<typeof ElForm>>()

// 保存设置
const handleSave = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    
    // 模拟保存设置到后端
    // 在实际项目中，这里会发送请求到后端API保存设置
    setTimeout(() => {
      // 保存设置到localStorage
      localStorage.setItem('systemSettings', JSON.stringify(settingsForm))
      
      ElMessage.success('设置保存成功')
    }, 800)
  } catch (error) {
    console.error('保存设置失败:', error)
  }
}

// 重置表单
const handleReset = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
}

// 恢复默认设置
const handleRestoreDefaults = () => {
  ElMessageBox.confirm(
    '确定要恢复默认设置吗？这将清除所有自定义设置。',
    '确认操作',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 恢复默认设置
    Object.assign(settingsForm, {
      systemName: 'SPZX Admin',
      theme: 'default',
      language: 'zh-CN',
      enableAnimation: true,
      autoSave: true,
      enableLoginNotify: true,
      enableOperationLogNotify: true,
      enableUpdateNotify: true
    })
    
    // 清除localStorage中的设置
    localStorage.removeItem('systemSettings')
    
    ElMessage.success('已恢复默认设置')
  }).catch(() => {
    // 用户取消操作
  })
}

// 加载保存的设置
const loadSavedSettings = () => {
  const savedSettings = localStorage.getItem('systemSettings')
  if (savedSettings) {
    try {
      const settings = JSON.parse(savedSettings)
      Object.assign(settingsForm, settings)
    } catch (error) {
      console.error('加载保存的设置失败:', error)
    }
  }
}

// 初始化时加载保存的设置
loadSavedSettings()
</script>

<style scoped>
.settings-container {
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 20px;
  color: #303133;
}

.settings-card, .notifications-card, .about-system-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  font-weight: 600;
  color: #303133;
}

.settings-form {
  padding: 20px;
}

.notifications-settings {
  padding: 20px;
}

.about-system {
  padding: 20px;
}

.system-info-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.system-info-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.system-info-item label {
  width: 120px;
  color: #606266;
  font-weight: 500;
}

.system-info-item span {
  color: #303133;
}
</style>